<template>
  <!-- 联合巡检：任务管理 -->
  <div class="task-index">
    <table />
    <div class="plan-header-box">
      <div class="subtitle-box startbox">
        <!-- <div class="icon"></div> -->
        <div class="name">任务管理</div>
      </div>
      <div class="return-btn">
        <div class="return">
          <span @click="goBack"></span>
        </div>
      </div>
    </div>
    <div class="filter-box">
      <div class="filter-1">
        <el-form
          ref="elForm"
          :model="formData"
          :rules="rules"
          size="medium"
          label-width="120px"
          class="elform"
        >
          <el-row :gutter="25">
            <el-col :span="4">
              <el-row :gutter="10">
                <el-col :span="24">
                  <el-form-item label="所属地市：" prop="time">
                    <el-select
                      v-model="formData.company"
                      placeholder="请选择"
                      :style="{width: '100%'}"
                      clearable
                    >
                      <el-option
                        v-for="item in CompanyList"
                        :key="item.value"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="变电站名称：" prop="time">
                    <el-select
                      v-model="formData.substation"
                      size="small"
                      placeholder="请选择"
                      :style="{width: '100%'}"
                      clearable
                      filterable
                    >
                      <el-option
                        v-for="item in SubstationList"
                        :key="item.value"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="维护班组：" prop="source">
                    <el-select
                      v-model="formData.whbz"
                      size="small"
                      placeholder="请选择"
                      :style="{width: '100%'}"
                      clearable
                      filterable
                    >
                      <el-option
                        v-for="item in getWhbzList"
                        :key="item.value"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="巡检类型：" prop="area">
                    <el-select
                      v-model="formData.InspectType"
                      size="small"
                      placeholder="请选择"
                      :style="{width: '100%'}"
                      clearable
                    >
                      <el-option
                        v-for="item in InspectTypeList"
                        :key="item.value"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="任务状态：" prop="area">
                    <el-select
                      v-model="formData.taskStatus"
                      size="small"
                      placeholder="请选择"
                      :style="{width: '100%'}"
                      clearable
                    >
                      <el-option
                        v-for="item in PlanstatusList"
                        :key="item.value"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-button
                    type="primary"
                    @click="submitForm"
                    class="centerbox conditionQuryBtn"
                    icon="el-icon-search"
                  >查询</el-button>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="bottom-border"></div>
    </div>
    <div class="btn-box">
      <el-button type="primary" @click="newAdd" class="centerbox">新增</el-button>
      <el-button type="primary" @click="delet" class="centerbox">删除</el-button>
      <el-button type="primary" @click="onceRelease" class="centerbox">任务下发</el-button>
      <!-- <el-button type="primary" @click="immediateExecution" class="centerbox">立即执行</el-button>
      <el-button type="primary" @click="periodicExecution" class="centerbox">周期执行</el-button>
      <el-button type="primary" @click="crontabDo" class="centerbox">定期执行</el-button>
      <el-button type="primary" @click="taskRelease" class="centerbox">再次下发</el-button>-->
    </div>
    <div class="self-table bigTableStyle">
      <el-table
        border
        :data="newTableData"
        @selection-change="handleSelectionChange"
        :row-class-name="tableRowClassName"
        style="width: 100%"
        height="100%"
        v-loading="loading"
        element-loading-text="数据加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="NUM" label="序号" :show-overflow-tooltip="true" width="70"></el-table-column>
        <el-table-column prop="SSDSMC" label="所属地市" :show-overflow-tooltip="true" width="160"></el-table-column>
        <el-table-column prop="YWBZMC" label="运维班组" :show-overflow-tooltip="true" width="130"></el-table-column>
        <el-table-column prop="BDZMC" label="变电站名称" :show-overflow-tooltip="true" width="160"></el-table-column>
        <el-table-column prop="RWMC" label="任务名称" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="XJLXMC" label="巡检类型" :show-overflow-tooltip="true" width="130"></el-table-column>
        <el-table-column prop="BZRMC" label="编制人" :show-overflow-tooltip="true" width="100"></el-table-column>
        <el-table-column prop="BZSJ" label="编制时间" :show-overflow-tooltip="true" width="180"></el-table-column>
        <el-table-column prop="subTask" label="子任务" :show-overflow-tooltip="true" width="80">
          <template slot-scope="scope">
            <div class="iconfont iconrenwu" @click="taskchildevent(scope)" style="cursor: pointer;"></div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="pointPosi" label="点位" :show-overflow-tooltip="true" width="60">
          <template slot-scope="scope">
            <div
              class="iconfont icondianweizongshu"
              @click="ponterevent(scope)"
              style="cursor: pointer;"
            ></div>
          </template>
        </el-table-column>-->
        <el-table-column prop="RWZT" label="任务状态" :show-overflow-tooltip="true" width="120"></el-table-column>
        <el-table-column prop="ZXFS" label="执行方式" :show-overflow-tooltip="true" width="120"></el-table-column>
        <el-table-column prop="tracking" label="跟踪" :show-overflow-tooltip="true" width="100">
          <template slot-scope="scope">
            <div
              v-if="scope.row.STATUS=='1'"
              class="iconfont icongenzong"
              @click="handleEdit(scope)"
              style="cursor: pointer;"
            ></div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="therrd" label="三维" :show-overflow-tooltip="true" width="100"> -->
        <!-- <template slot-scope="scope">
            <div
              class="iconfont iconsanweimoxing"
              @click="handleEdit(scope)"
              style="cursor: pointer;"
            ></div>
        </template>-->
        <!-- </el-table-column> -->
      </el-table>
    </div>
    <div class="self-pagination elPaginationStyle centerbox">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pages.page"
        :page-sizes="[10, 20, 30]"
        :page-size="pages.pageSize"
        layout="total,prev, pager, next,sizes, jumper"
        :total="pages.totalSize"
      ></el-pagination>
    </div>

    <el-dialog title="新增任务" :visible.sync="newAddstate" width="50%" :before-close="newAddclsoe">
      <newAddm @close="newAddclsoe" @closeInit="closeInit" v-if="newAddstate" />
    </el-dialog>
    <el-dialog
      title="再次下发"
      :visible.sync="taskReleasestate"
      width="50%"
      :before-close="taskReleaseclose"
    >
      <taskIssuedAgain @close="taskReleaseclose" v-if="taskReleasestate" :datas="tableSelect" />
    </el-dialog>
    <el-dialog
      title="子任务选择"
      :visible.sync="taskchildstate"
      width="50%"
      :before-close="taskchilclose"
    >
      <taskchild @close="taskchilclose" v-if="taskchildstate" :datas="tableSelect" />
    </el-dialog>
    <el-dialog title="点位配置" :visible.sync="ponterstate" width="50%" :before-close="ponterclose">
      <ponterm @close="ponterclose" v-if="ponterstate" :datas="tableSelect" />
    </el-dialog>
    <el-dialog
      title="定期执行"
      :visible.sync="crontabDostate"
      width="50%"
      :before-close="crontabDoclose"
    >
      <crontabdom @close="crontabDoclose" v-if="crontabDostate" :datas="tableSelect" />
    </el-dialog>
    <el-dialog title="周期执行" :visible.sync="zhouqistate" width="50%" :before-close="zhouqiclose">
      <zhouqim @close="zhouqiclose" v-if="zhouqistate" :datas="tableSelect" />
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import newAddm from "./modules/newAddm.vue";
import taskIssuedAgain from "./modules/taskIssuedAgain.vue";
import taskchild from "./modules/taskchild.vue";
import ponterm from "./modules/ponterm.vue";
import crontabdom from "./modules/crontabdom.vue";
import zhouqim from "./modules/zhouqim.vue";
import { JointInspectionModule } from "@/store/modules/JointInspection";
import qs from "qs";

//loadsh
import lodash from "lodash";
import { log } from "three";
@Component({
  components: {
    newAddm,
    taskIssuedAgain,
    taskchild,
    ponterm,
    crontabdom,
    zhouqim,
  },
})
export default class extends Vue {
  // 下拉框单位名称
  get CompanyList() {
    let CompanyList = JointInspectionModule.CompanyList || [];
    return CompanyList;
  }
  // 下拉框变电站
  get SubstationList() {
    let SubstationList = JointInspectionModule.LocalCityList || [];
    return SubstationList;
  }
  // 下拉框维护班组
  get getWhbzList() {
    let getWhbzList = JointInspectionModule.getWhbzList || [];
    return getWhbzList;
  }
  // 下拉框巡检类型
  get InspectTypeList() {
    let InspectTypeList = JointInspectionModule.getXslxList || [];
    return InspectTypeList;
  }
  // 下拉框任务状态
  // get PlanstatusList() {
  //   let PlanstatusList = JointInspectionModule.getJhztList || [];
  //   return PlanstatusList;
  // }
  PlanstatusList = [
    { code: "", name: "全部" },
    { code: "0", name: "未下发" },
    { code: "1", name: "已下发" },
    { code: "2", name: "已取消" },
  ];
  // 巡检类型
  xjType = {
    0: "未知",
    1: "例行巡检",
    2: "自定义巡检",
    3: "专项巡检",
    4: "熄灯巡检",
    5: "特殊巡检",
  };

  //搜索框from表单数据
  private formData = {
    company: "", // 所属地市ID
    substation: "", // 变电站ID
    taskStatus: "", // 任务状态
    whbz: "", // 维护班组
    InspectType: "", // 巡检类型
  };

  // 前一个表单数据
  oldForm = {};
  jclxOptions: { [key: string]: any } = [];
  rules = {
    time: [],
    alarm: [],
    source: [],
    name: [],
  };
  $refs!: {
    elForm: any;
  };
  // 勾选的消息
  tableSelect = [];
  // 表格选择事件
  handleSelectionChange(val: any): void {
    // console.log(val);
    this.tableSelect = val;
  }
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: any): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 1) {
      return "row1";
    } else {
      return "row2";
    }
  }

  //返回按钮
  goBack() {
    window.history.back();
  }

  // 提示消息
  private totast(msg: string) {
    this.$message({
      message: msg,
      duration: 0,
      showClose: true,
      type: "warning",
    });
  }

  // 查询
  submitForm() {
    // console.log("CompanyList:",this.CompanyList)
    this.$refs.elForm.validate((valid: any) => {
      if (!valid) return;
      // TODO 提交表单
      // console.log("this.formData:", this.formData);
      this.pages.page = 1;
      this.queryAuxRealtimeList();
    });
  }
  // 刷新
  resForm() {
    this.pages.page = 1;
    this.formData = {
      company: "", // 所属地市ID
      substation: "", // 变电站ID
      taskStatus: "", // 任务状态
      whbz: "", // 维护班组
      InspectType: "", // 巡检类型
    };
    this.queryAuxRealtimeList();
  }
  // table表格相关事件数据
  private tableData = [
    // {
    //   BDZID: "42b951c5298a0c76136133a564016242b58c0a05c2",
    //   BDZMC: "110kV舜华变电站",
    //   BZ: null,
    //   BZRMC: "张德才",
    //   BZSJ: "2020-09-10 15:23:14",
    //   ID: "953e980f2c2a474eb695ae3419a8fcc8",
    //   JHID: null,
    //   JQRRWID: null,
    //   MID: null,
    //   NUM: 1,
    //   RN: 1,
    //   RWMC: "110kV舜华变电站专项巡检",
    //   RWZT: "未下发",
    //   RWZTBM: "0",
    //   SSDS: "8a1ea5c64bdebad1014bdebc55c80003",
    //   SSDSMC: "国网济南供电公司",
    //   STATUS: null,
    //   XJLX: "3",
    //   XJZQ: null,
    //   XSFS: null,
    //   XSLX: null,
    //   YWBZID: "8a1ea5c64bdebad1014bdebc55c8004d",
    //   YWBZMC: "变电运维二班",
    //   ZXFS: "定期,定期,定期,立即",
    //   ZXQKID: "5219,5220,5225,5226",
    // },
  ];
  get newTableData() {
    let tableData = lodash.cloneDeep(this.tableData);
    tableData.map((v: any, i: any) => {
      v.XJLXMC = this.xjType[Number(v.XJLX)];
    });
    return tableData;
  }
  //分页数据事件相关
  pages: { pageSize: number; page: number; totalSize: number } = {
    pageSize: 20,
    page: 1,
    totalSize: 0,
  };
  //   分页
  handleSizeChange(val: any) {
    // console.log(`每页 ${val} 条`);
    this.pages.pageSize = val;
    this.pages.page = 1;
    this.queryAuxRealtimeList();
  }
  // 分页事件
  handleCurrentChange(val: any) {
    this.pages.page = val;
    this.queryAuxRealtimeList();
  }

  // 监听查询条件变化
  @Watch("formData", { immediate: true, deep: true })
  setCdType(newForm) {
    let oldForm: any = this.oldForm;
    // 如果变电站id变化
    if (newForm.station !== oldForm.station) {
      // this.formData.jclx = "";
      this.queryTypes();
    }
    this.oldForm = lodash.cloneDeep(newForm);
  }

  // 查询测点类型
  queryTypes() {
    let form = this.formData;
    let params = {
      // station: form.station,
      type: "fk",
    };
    (this as any).$services
      .queryTypes({ data: params })
      .then((result: any) => {
        this.jclxOptions = result.data;
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  loading = false;
  // 查询当前表格数据
  queryAuxRealtimeList() {
    // console.log("this.formData:", this.formData);
    this.loading = true;
    let form = {
      page: this.pages.page, // 第几页
      rows: this.pages.pageSize, // 每页多少条
      ssds: this.formData.company, // 所属地市ID
      bdzMc: this.formData.substation, // 变电站ID
      rwzt: this.formData.taskStatus, // 任务状态
      whbz: this.formData.whbz, // 维护班组
      xjlx: this.formData.InspectType, // 巡检类型
    };
    (this as any).$services
      .getRwglDetail({ data: form, method: "get" })
      .then((result: any) => {
        // console.log("result:", result);
        let data = result.data;
        this.tableData = data.rows;
        this.pages.totalSize = data.total;
        this.loading = false;
      })
      .catch((err: object) => {
        console.log(err);
        this.loading = false;
      });
  }

  public newAddstate: boolean = false;
  newAdd(): void {
    // console.log("新增");
    this.newAddstate = true;
  }
  newAddclsoe(): void {
    this.newAddstate = false;
  }
  closeInit() {
    this.queryAuxRealtimeList();
  }
  // 删除
  delet(): void {
    // console.log(this.tableSelect);

    let selectTabLen = this.tableSelect.length;
    if (selectTabLen !== 1) {
      this.$message({
        type: "warning",
        message: "请选择一条进行删除！",
      });
    } else {
      this.$confirm("是否删除该巡检任务?", "信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var params = {
            rwid: this.tableSelect[0].ID,
            xjlx: this.tableSelect[0].XJLX,
          };

          (this as any).$services
            .delRwById({ data: params, method: "delete", postparams: true })
            .then((result: any) => {
              if (result.data) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.queryAuxRealtimeList();
              }
            })
            .catch((err: object) => {
              this.$message({
                type: "warning",
                message: "删除失败",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    }
  }

  //再次下发
  taskReleasestate = false;
  taskRelease(): void {
    // console.log(this.tableSelect);
    // 已下发可以显示弹窗
    if (this.tableSelect[0].RWZTBM == 0) {
      this.$message({
        type: "warning",
        message: "请选择已下发任务！",
      });
      return;
    }
    this.taskReleasestate = true;
  }
  taskReleaseclose() {
    this.taskReleasestate = false;
  }
  // 立即执行
  immediateExecution(): void {
    if (this.tableSelect[0].XJLX == 1) {
      this.$message({
        type: "warning",
        message: "例行巡检不可直接下发",
      });
      return;
    }
    let selectTabLen = this.tableSelect.length;
    if (selectTabLen === 1 && this.tableSelect[0].RWZTBM == 0) {
      this.$confirm("是否立即执行该巡检任务?", "信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // console.log(this.tableSelect);
          let params = {
            czzt: "send",
            bdzid: this.tableSelect[0].BDZID,
            xjlx: this.tableSelect[0].XJLX,
            rwid: this.tableSelect[0].RWID,
            sendType: "lj",
          };
          (this as any).$services
            .xzrwRwxfButton({
              data: { xzrwParam: params },
              method: "post",
              postparams: true,
            })
            .then((result: any) => {
              if (result.data) {
                this.$message({
                  type: "success",
                  message: "执行成功!",
                });
              }
            })
            .catch((err: object) => {
              console.log(err);
              this.$message({
                type: "warning",
                message: "执行失败",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消执行",
          });
        });
    } else {
      this.$message({
        type: "warning",
        message: "请选择一条未下发任务！",
      });
    }
  }
  // 周期执行 例行巡检1 自定义巡检2 可以周期
  zhouqistate = false;
  periodicExecution(): void {
    // console.log(this.tableSelect);
    let selectTabLen = this.tableSelect.length;
    if (selectTabLen != 1) {
      this.$message({
        type: "warning",
        message: "请选择一条任务！",
      });
      return;
    }
    if (this.tableSelect[0].RWZTBM != 0) {
      this.$message({
        type: "warning",
        message: "请选择未下发任务！",
      });
      return;
    }
    if (this.tableSelect[0].XJLX >= 3) {
      this.$message({
        type: "warning",
        message: "该类型的任务不能进行周期执行操作！",
      });
      return;
    }
    this.zhouqistate = true;
  }
  zhouqiclose(): void {
    this.zhouqistate = false;
  }

  //定期执行 例行没有定期
  crontabDostate = false;
  crontabDo(): void {
    // console.log(this.tableSelect);
    let selectTabLen = this.tableSelect.length;
    if (selectTabLen != 1) {
      this.$message({
        type: "warning",
        message: "请选择一条任务！",
      });
      return;
    }
    if (this.tableSelect[0].RWZTBM != 0) {
      this.$message({
        type: "warning",
        message: "请选择未下发任务！",
      });
      return;
    }
    if (this.tableSelect[0].XJLX == 1) {
      this.$message({
        type: "warning",
        message: "例行巡检任务不能进行定期执行操作！",
      });
      return;
    }
    this.crontabDostate = true;
  }
  crontabDoclose(): void {
    this.crontabDostate = false;
  }

  // 任务下发
  onceRelease(): void {
    // console.log(this.tableSelect);
    let selectTabLen = this.tableSelect.length;
    if (selectTabLen === 1 && this.tableSelect[0].RWZTBM == 0) {
      if (this.tableSelect[0].XJLX == 1) {
        this.$message({
          type: "warning",
          message: "例行巡检不可直接下发",
        });
        return;
      }
      let params: any = {
        bdzid: this.tableSelect[0].BDZID,
        xjlx: this.tableSelect[0].XJLX,
        rwid: this.tableSelect[0].ID,
        rwmc: this.tableSelect[0].RWMC,
        czzt: "bj",
      };
      (this as any).$services
        .xzrwRwxfButton({
          data: { xzrwParam: params },
          method: "post",
          postparams: true,
        })
        .then((result: any) => {
          if (result.data) {
            this.$message({
              type: "success",
              message: "下发成功!",
            });
          }
          this.submitForm();
        })
        .catch((err: object) => {
          console.log(err);
          this.$message({
            type: "warning",
            message: "下发失败",
          });
        });
    } else {
      this.$message({
        type: "warning",
        message: "请选择一条未下发任务！",
      });
    }
  }

  handleEdit(scope: any) {
    // this.$router.push({
    //   path: "track",
    //   query: { id: scope.row.MID, xslx: scope.row.XSLX, oldrouter: "task" },
    // });
    this.routerpush(scope.row);
  }
  routerpush(data) {
    var oldoldrouter = this.$route.query.oldrouter;
    // const routeOne: any = this.$router.resolve({
    //   name: "inspectionmonitor",
    //   query: {
    //     bdzid: data.BDZID,
    //     queryId: data.ID, //当前列表里的ID
    //     xslx: this.formData.xslx,
    //     id: this.formData.jhid, //传进来的计划id
    //     xsfs: data.XSFS,
    //     oldoldrouter: oldoldrouter,
    //   },
    // });
    // console.log('routeOne.href:',routeOne.href);
    // window.open(routeOne.href, "_blank");
    let query = {
      bdzid: data.BDZID,
      queryId: data.JHID, //当前列表里的ID
      xslx: data.XSLX,
      id: data.ID, //传进来的计划id
      xsfs: data.XSFS,
      oldoldrouter: "task",
    };
    let search = qs.stringify(query);
    let url = `/inspectionmonitor/#/jointInspection/inspectionmonitor?${search}`;
    window.open(url, "_blank");
  }
  //子任务选择
  taskchildstate = false;
  taskchildevent(scope: any) {
    this.tableSelect = [];
    this.tableSelect.push(scope.row);
    this.taskchildstate = true;
  }
  taskchilclose() {
    this.taskchildstate = false;
    this.tableSelect = [];
  }

  //点位配置
  ponterstate = false;
  ponterevent(scope: any) {
    // console.log(scope.row);
    this.tableSelect = [];
    this.tableSelect.push(scope.row);
    this.ponterstate = true;
  }
  ponterclose() {
    this.ponterstate = false;
    this.tableSelect = [];
  }

  mounted() {
    // 查询表格数据
    this.queryAuxRealtimeList();
  }
}
</script>

<style lang="scss" scoped>
.task-index {
  width: 100%;
  height: 100%;
  padding: 0 0.24rem;
  .plan-header-box {
    height: 0.3rem;
    margin-top: 0.1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .subtitle-box {
      height: 0.3rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      // .icon {
      //   width: 0.16rem;
      //   height: 0.18rem;
      // background: url("../../../../assets/img/JointInspection/xjjh_subtitle_icon.png")
      //   no-repeat center center;
      // background-size: 100% 100%;
      // }
      .name {
        font-size: 0.18rem;
        margin-left: 0.06rem;
      }
    }
    .return-btn {
      height: 0.3rem;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .return {
        width: 0.9rem;
        height: 0.3rem;
        text-align: right;
        > span {
          display: inline-block;
          width: 0.9rem;
          height: 0.3rem;
          background: url(../../../../assets/img/return.png) no-repeat;
          background-size: 100% 100%;
          vertical-align: middle;
          cursor: pointer;
        }
      }
    }
  }
  .filter-box {
    // height: 1.04rem;
    width: 100%;
    margin-top: 0.15rem;
    .filter-1 {
      height: 0.36rem;
      width: 100%;
      margin-top: 0.1rem;
      .elform {
        width: 100%;
        height: 100%;
      }
    }
    .bottom-border {
      width: 100%;
      height: 2px;
      background: linear-gradient(
        90deg,
        rgba(30, 60, 166, 1),
        rgba(255, 255, 255, 1),
        rgba(32, 62, 168, 1)
      );
      margin-top: 0.1rem;
    }
  }
  .btn-box {
    height: 0.36rem;
    width: 100%;
    margin-top: 0.1rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .self-table {
    height: calc(100% - 2.46rem);
    width: 100%;
    margin-top: 0.1rem;
    .subTask-box {
      width: 100%;
      height: 100%;
      background: red;
    }
  }
  .self-pagination {
    width: 100%;
    height: 0.6rem;
  }
}
</style>
<style lang="scss">
.task-index {
  //   按钮样式
  .el-button {
    width: 1.1rem;
    height: 0.36rem;
    padding: 0;
  }
  // 表格修改
  // .el-table__body-wrapper {
  //   overflow: auto;
  //   height: calc(100% - 0.4rem);
  //   .el-table__body {
  //     height: 94%;
  //   }
  // }
  // 表单输入样式设置
  .el-input--medium {
    font-size: 0.18rem;
  }
  .el-form-item__label {
    font-size: 0.18rem;
  }
  .el-select .el-input .el-input__inner {
    font-size: 0.18rem;
  }
}
</style>

